<template>
  <div class="guide" v-if="!show" @touchmove.prevent>
     <div class="guide-inner">
       <i v-if="rightpSlide" class="iconfont icon-guide-up up"></i>
       <i class="iconfont icon-guide-hand hand"></i>
       <i v-if="upSlide" class="iconfont icon-guide-right right"></i>
       <i v-if="upSlide" class="iconfont icon-guide-left left"></i>
       <p v-if="upSlide" class="info">左右滑动查看更多关键指标</p>
       <p v-if="rightpSlide" class="info">向上滑动查看全部报表</p>
       <mt-button @click="next" v-if="upSlide" type="primary" class="next">下一步</mt-button>
       <mt-button @click="go" v-if="rightpSlide" type="primary" class="next">我知道了</mt-button>
     </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        show: false,
        upSlide: true,
        rightpSlide: false
      };
    },
    methods: {
      next () {
        this.upSlide = false;
        this.rightpSlide = true;
      },
      go () {
        localStorage.setItem('guideFlag', false);
        this.show = !this.show;
      }
    },
    mounted () {
      this.show = localStorage.getItem('guideFlag');
    }
  };
</script>

<style lang="scss">
  .guide{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.7);
    color: #fff;
    z-index: 9;
    i{
      font-size: 20vw;
      position: absolute;
      left: 50%;
      top: 60%;
    }
    .hand{
      margin-left: -10vw;
      margin-top: -5vw;
    }
    .up{
      font-size: 30vw;
      margin-left: -14vw;
      margin-top: -40vw;
    }
    .right{
      font-size: 5vw;
      margin-left: 14vw;
      margin-top: 0;
    }
    .left{
      font-size: 5vw;
      margin-left: -44vw;
      margin-top: 0;
    }
    .info{
      position: absolute;
      left: 0;
      top: 70%;
      right:0;
      text-align: center;
      margin-top: 5vw;
      font-size: 5vw;
    }
    .next{
      width: 120px;
      position: absolute;
      left: 0;
      top: 82%;
      right:0;
      text-align: center;
      margin: 0 auto;
    }
  }
</style>
